window.onload = function () {
const canvas = document.querySelector('canvas');
const width = window.innerWidth;
const height = window.innerHeight;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
let circles = [], images=[];
// const imgSrc= [{src:
// "S26qtkq.png",
// width: 150,
// height: 120
// },
// {src:"EPT8xU0.png",
// width: 120,
// height: 150
// },
// {
// src:"6ECgLDP.png",
// width: 160,
// height: 100
// }
// ];
// let imgWidth, imgHeight;

	
// const ImgObj = function () {
//    this.img = new Image();
// 	 let idx = Math.floor(Math.random() * 3);
// 	 	this.img.src = imgSrc[idx].src;
// 		 this.width = imgSrc[idx].width;
// 			this.height = imgSrc[idx].height;
// 		 this.x = Math.random()*(width - this.width*2) + this.width;
// 			this.y = Math.random()*(height-this.height) + this.height;
// 	}	



// ImgObj.prototype.draw = function() {
// ctx.drawImage(this.img,this.x,this.y,this.width,this.height);	
// }

// ImgObj.prototype.update = function () {
// 	 this.y = this.y < -120 ? height : this.y - 0.25;
// 		this.x = this.x < -150	? width : this.x-0.5;
// }


	
   
const getRandomColor = function() {
const colors= ['rgba(222, 30, 30, 1)', '#398DA7', '#84CBDD'];
return colors[Math.floor(Math.random() * colors.length)];
}

const Circle = function() {
		this.r = Math.random()*25 + 20;	
		this.x = Math.random()*(window.innerWidth - this.r * 2) + this.r + 200;
		this.y = Math.random()*(window.innerHeight - this.r * 2) + this.r + 200;
		
		this.dy = -1;
		this.dx = (Math.random() - 0.5) * 2;
	this.color = `rgba(222, 30, 30, 0.5)`;
}


Circle.prototype.draw = function () {
	ctx.beginPath();
	ctx.arc(this.x,this.y,this.r,0, Math.PI * 8,true);
	//ctx.stroke();
	ctx.fillStyle=this.color;

	ctx.fill();
}

Circle.prototype.update = function () {
	 this.y = this.y < 0 ? height : this.y +this.dy;
		this.x = this.x > window.innerWidth	? this.r: this.x+this.dx;
	
}
	
	

const animate = function() {
		requestAnimationFrame(animate);
		ctx.clearRect(0,0,window.innerWidth, window.innerHeight);
	
		circles.map(c=>{
			c.update();
			c.draw();		
		})	 
	
		// images.map(image => {
		// 	image.update();
  // 	image.draw();	
		// })	
		
	
 	
}

circles = Array(75).fill(0).map(x => new Circle());  
//const image = new ImgObj();
// images	= Array(10).fill(0).map(x => new ImgObj());	
animate();
	
}